<!-- 添加商品 -->
<template>
    <div class='bgff h100 pd pt10 sdfgdsytryty'>
        <p class="title-label">
            <span v-if="!sh">
                {{ isbj ? "编辑" : "新增" }}
            </span> 商品

            <span v-if="sh" class="ml20">
                审核状态:
                <span v-if="shekjr == 1">待审核</span>
                <span v-if="shekjr == 2" class="ls">审核通过</span>
                <span v-if="shekjr == 3" class="z9">审核不通过({{ form.AuditRemarks }})</span>
            </span>
        </p>
        <div>
            <div class="context-page-case mt20 ">
                <n-form :model="form" :rules="rules" ref="formRef" label-width="140" :inline="false" size="normal"
                    label-placement="left">
                    <n-grid :cols="24" :x-gap="20" :y-gap="20">
                        <n-form-item-gi label="商品名称:" path="name" span="24">
                            <n-input v-model:value="form.name" type="text" placeholder="请输入商品名称" size="medium"
                                clearable></n-input>
                        </n-form-item-gi>

                        <n-form-item-gi label="商品规格:" path="specification" span="12">
                            <n-input v-model:value="form.specification" type="text" placeholder="请输入商品规格" size="medium"
                                clearable></n-input>
                        </n-form-item-gi>
                        <n-form-item-gi label="商品分类:" path="classification" span="12">
                       

                                <n-select v-model:value="form.classification" size="medium" :options="optionsa" clearable />
                                
                        </n-form-item-gi>






                        <n-form-item-gi label="商品缩略图:" path="cover" span="12">
                            <div class="logo-context vertical-center pr">
                                <div v-if="form.cover" class="w100 h100 pr dfggtydert">
                                    <img :src="form.cover" class="w100 h100 imgjz" />
                                    <div class="magnifying-glass vertical-center">
                                        <p>
                                            <i class="iconfont dx-sousuo cf fz32 sz sdfsdtrtyt">
                                                <n-image :src="form.cover" class="kjmsertw" />
                                            </i>
                                            <i class="iconfont dx-shuaxin1 cf fz32 sz ml20"
                                                @click="photoShowModaler = true">
                                            </i>
                                        </p>
                                    </div>
                                </div>

                                <div v-else class="vertical-center dsfdgtrytryde fz12 pd" @click="photoShowModaler = true">
                                    点击上传商品缩略图建议尺寸400*400
                                </div>
                            </div>
                        </n-form-item-gi>

                        <n-form-item-gi label="轮播图:" span="12">

                            <div class="jjnmjxeerrw">
                                <div class="logo-context vertical-center pr" v-for="(item, idx) in zzlist" :key="idx">
                                    <n-image :src="item" class="w100 h100" />
                                    <i class="iconfont dx-shanchu cf fz40 sdfsdrtrt" @click="delezpewe(idx)"></i>
                                </div>
                                <div class="logo-context vertical-center pd fz12" @click="photoShowModalsan = true">
                                    <span>点击上传轮播图建议尺寸750*300</span>
                                </div>
                            </div>
                        </n-form-item-gi>


                        <n-form-item-gi label="商品售价:" path="price" span="12">
                            <n-input v-model:value="form.price" type="text" placeholder="请输入商品售价" size="medium"
                                clearable></n-input>
                        </n-form-item-gi>
                        <n-form-item-gi label="商品库存:" path="inventory" span="12">
                            <n-input-number min="1" v-model:value="form.inventory" type="text" placeholder="请输入商品库存" size="medium"
                                clearable></n-input-number>
                        </n-form-item-gi>




                        <n-form-item-gi label="商品详情:" span="24">
                            <div class="fwbclass ">
                                <tinymce ref="tinymceref"></tinymce>
                            </div>
                        </n-form-item-gi>




                    </n-grid>
                </n-form>


                <div class=" vertical-center dsfsdttyrt tl">
            <p v-if="!sh">
                <n-button type="primary" size="medium" @click="addForm">{{ isbj ? '保存' : "添加" }}商品</n-button>
                <n-button size="medium" @click="callBack" class="ml20">返回上一页</n-button>
            </p>
            <p v-else>
                <n-button type="primary" size="medium" @click="shejjhert" v-if="shekjr == 1">审核通过</n-button>
                <n-button type="error" size="medium" @click="photoShowModalssi = true" class="ml20"
                    v-if="shekjr == 1">审核不通过</n-button>
                <n-button size="medium" @click="callBack" class="ml20">返回上一页</n-button>
            </p>
        </div>



               
            </div>
        </div>


        <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>商品缩略图</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" types="商品缩略图"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModaler = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>



        <n-modal v-model:show="photoShowModalsan" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>轮播图</div>
            </template>
            <div>
                <photoGallery @getImg="getImgsan" types="xq轮播图"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalsan = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgsan"> 确定 </n-button>
                </div>
            </template>
        </n-modal>

        <n-modal v-model:show="photoShowModalssi" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>审核原因</div>
            </template>
            <div>
                <n-input v-model:value="AuditRemarks" type="textarea" :autosize='{ minRows: 10 }' placeholder="请输入审核原因"
                    size="medium" clearable @change=""></n-input>

            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalsan = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="shjhertsr"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import { dxget, dxpost, qurl, hf, callBack, dialog } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import tinymce from "../../components/util/tinymce.vue"
const cz = qurl()
const isbj = ref(false) //是否为编辑
const photoShowModaler = ref(false)
const photoShowModalsan = ref(false)
const photoShowModalssi = ref(false)
const tinymceref = ref()
const AuditRemarks = ref()
const arrxe = ref()
const sh = ref(cz.sh)
const shekjr = ref()
const form = ref({
    name: "", // 商品名称
    specification: "",//规格
    classification: "",//分类
    cover: "",//封面
    details: "",//详情
    price: "",//单价
    inventory: "",// 库存
    slideshow: "",//轮播图
    shopId: cz.shopId||"",//店铺id
})

const formRef = ref()
const optionsa = ref()
const optionsb = ref()
const optionsc = ref()
const zzlist = ref([])
const djdjdfsr = ref()
const url = "xqts/xqcommodityManagement"
const rules = {
    name: {
        required: true,
        message: '请输入商品名称',
        trigger: 'blur'
    },
    specification: {
        required: true,
        message: '请输入商品规格',
        trigger: 'blur'
    },
    classification: {
        required: true,
        message: '请选择商品分类',
        trigger: 'blur'
    },

    cover: {
        required: true,
        message: '请上传商品缩略图',
        trigger: 'blur'
    },

    
}






let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    form.value.cover = jjnmnxeer
    photoShowModaler.value = false;
};


let jjnmnxesan = "";
const getImgsan = (data) => {
    jjnmnxesan = data;
};
const setImgsan = () => {
    zzlist.value.push(jjnmnxesan)
    photoShowModalsan.value = false;
};



const delezpewe = (idx) => {
    zzlist.value.splice(idx, 1)
}





const addForm = (e) => {
    e.preventDefault();
    formRef.value?.validate(async (errors) => {
        if (!errors) {
            if (zzlist.value.length <= 0) {
                window.$message.error("请上传轮播图")
                return
            }

            form.value["auditStatus"] = 1
            form.value.details = tinymceref.value.getContent().trim()
            const { errno }: any = await dxpost(url, {
                ...form.value,
                slideshow: zzlist.value.join(","),
            }, isbj.value ? "put" : "post")
            if (errno == 0) {
                window.$message.success("提交成功！请等待审核")
                callBack()
            }
        }
    })

}




const initGetdata = async () => {
    const { data }: any = await dxget(url, {
        id: cz.id
    })
    try{
        zzlist.value = data.slideshow.split(",")
    }catch(e){
        
    }
    form.value = data
    shekjr.value = data.auditStatus

    tinymceref.value.setContent(data.details)


}

if (cz.id) {
    isbj.value = true
    initGetdata()
}



const shejjhert = async () => {
    const { errno }: any = await dxpost(url, {
        id: cz.id,
        auditStatus: 2
    }, "put")
    if (errno == 0) {
        window.$message.success("审核通过")
        callBack()
    }
}


const shjhertsr = async () => {
    const { errno }:any = await dxpost(url, {
        id: cz.id,
        auditStatus: 3,
        AuditRemarks: AuditRemarks.value
    }, "put")
    if (errno == 0) {
        window.$message.success("操作成功！")
        callBack()
    }
}

const getzdise = async()=>{
    const {data}:any =  await dxget("dxgjAdmin/getzd",{name:'xqclassificationGoods'})
    optionsa.value = data
}

getzdise()

</script>
<style scoped>
.context-page-case {
    width: 800px;
}

.fwbclass {
    height: 600px;
}
</style>